<template>
  <div class="q-pa-md">
    <t-btn label="Open Dialog" color="primary" @click="dialog = true" />

    <t-dialog v-model="dialog">
      <t-card>
        <t-card-section>
          <div class="text-h6">First dialog</div>
        </t-card-section>
        <t-card-section class="row items-center q-gutter-sm">
          <t-btn label="Open dialog" color="primary" @click="dialog2 = true" />
          <t-btn v-close-popup label="Close" color="primary" />

          <t-dialog v-model="dialog2">
            <t-card>
              <t-card-section>
                <div class="text-h6">Second dialog</div>
              </t-card-section>
              <t-card-section class="row items-center q-gutter-sm">
                <t-btn
                  v-close-popup="2"
                  label="Close both dialogs"
                  color="accent"
                />
                <t-btn v-close-popup label="Close this dialog" color="accent" />
              </t-card-section>
            </t-card>
          </t-dialog>
        </t-card-section>
      </t-card>
    </t-dialog>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        dialog: ref(false),
        dialog2: ref(false),
      };
    },
  };
</script>
